<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>值绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 对于单选框，复选框，选择框的选项，v-model绑定的值通常是 静态字符串/布尔值/数组  -->
    <!-- 若提供了value则指向value，否则指向两者之间的字符串 -->
    <div id="app">
        <!-- 当选中时，checked为字符串"选中" -->
        <input type="radio" v-model="checked" value="选中">
        <p>checked: {{ checked }}</p>
        <!-- toggle为true/false -->
        <input type="checkbox" v-model="toggle">
        <p>checked: {{ toggle }}</p>
        <!-- selected为字符串"abc" -->
        <select v-model="selected">
            <option value="abc">ABC</option>
        </select>
        <p>checked: {{ selected }}</p>
    </div>

    <!-- 动态绑定：使用v-bind实现：大致是绑定value -->
    <div id="app-2">
        <!-- true/false-value特性并不会影响value的特性，因为浏览器并不会提交没有选中的复选框,
            当必须确保两个值中的一个被提交，选择单选框 
        -->
        <label>
            选中：<input type="checkbox" v-model="checked" true-value="yes" false-value="no">
        </label>
        <p>是否选中： {{ checked }}</p>
        <!-- 单选按钮 -->
        <label>
            选中：<input type="radio" v-model="radioChecked" v-bind:value="value">
        </label>
        <p>选中状态：{{ radioChecked }}</p>
        <!-- 选择框 -->
        <select v-model="selected">
            <option v-bind:value="{number: 123}">456</option>   
        </select>
        <p>是数字还是对象： {{ typeof selected }}</p>

        <!-- 绑定v-model的修饰符： -->
        <!-- .lazy: 默认情况是在input事件触发即同步，加上修饰符变为使用change事件进行同步 -->
        <input v-model.lazy="msg">
        <!-- (需要借以失去焦点或者按住其他特殊按键时才会触发change事件） -->
        <p>添加.lazy修饰符的同步状态：{{ msg }}</p>
        <!-- .number: 将用户输入的值转为数值类型，（即使在type为number时，也可能会返回字符串）
            如果无法使用转为数值的方法（parseFloat,parseInt)解析时，将返回原始的值 
        -->
        <input v-model.number="age">
        <p>你输入的年龄为： {{ age }}</p>
        <!-- 如果要自动过滤用户输入的首尾空白字符：使用.trim -->
        <input v-model.trim="inputValue">
        <p>过滤后的字符： {{ inputValue }}</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                checked: "",
                toggle: true,
                selected: ""
            }
        });
        var app2 = new Vue({
            el: "#app-2",
            data: {
                value: "选中",
                checked: "",
                radioChecked: "",
                selected: "",
                msg: "",
                age: 0,
                inputValue: ""
            }
        })
    </script>
</body>
</html>